<template>
  <div>
    <bread-crumb :one="'平台管理'" :two="'接口映射'"></bread-crumb>

    <el-form :inline="true" :model="formData">
      <el-form-item label="接口：">
        <el-input v-model="formData.interFace"></el-input>
      </el-form-item>
      <el-form-item label="组件名：">
        <el-input v-model="formData.bundle"></el-input>
      </el-form-item>
      <el-form-item label="服务器名：">
        <el-input v-model="formData.service"></el-input>
      </el-form-item>
      <el-form-item label="版本：">
        <el-input v-model="formData.version"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="search" @click="handleSearch()">搜索</el-button>
        <el-button type="primary" icon="delete" @click="handleClear()">清空</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading.body="loading" :data="tableData" border>
      <el-table-column prop="interFace" label="接口名" align="center"></el-table-column>
      <el-table-column prop="bundle" label="组件名" width="250" align="center"></el-table-column>
      <el-table-column prop="version" label="版本" align="center"></el-table-column>
      <el-table-column prop="service" label="服务名" align="center"></el-table-column>
      <el-table-column prop="memo" label="备注" width="200" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <Pagination />
  </div>
</template>

<script>
  import BreadCrumb from "@/components/BreadCrumb.vue";
  import {mixins} from "@/core";

  export default {
    components: {
      BreadCrumb
    },
    mixins: [mixins],
    data () {
      return {
        API: {
          query: "/gafe/service_maps",
          deleteUrl: "/gafe/del_service_map"
        },
        formData: {
          interFace: "",
          bundle: "",
          service: "",
          version: ""
        }
      }
    }
  }
</script>

<style>
  .green_circle, .red_circle {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: 5px;
    background-color: green;
  }

  .red_circle {
    background-color: red;
  }
</style>

<style scoped>
  .el-input {
    width: 120px;
  }
</style>
